<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
      :header-style="{ paddingBottom: '0' }"
      :body-style="{
        padding: '20px',
      }"
    >
      <template #title>
        {{ $t('workplace.categoriesPercent') }}
      </template>
      <Chart height="310px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import useLoading from '@/hooks/loading';

  const { loading } = useLoading();
  const chartOption = ref({}); // 初始化图表选项

  // 模拟从后端获取数据
  const fetchData = async () => {
    // 模拟一个 API 调用，这里使用固定的数据
    return new Promise<number[]>((resolve) => {
      setTimeout(() => {
        resolve([23, 45, 67, 2]); // 假设后端返回的数据是这样
      }, 1000);
    });
  };
  // 根据类别索引返回不同颜色
  const getCategoryColor = (index: number) => {
    const colors = ['#249EFF', '#313CA9', '#21CCFF', '#FFBB33']; // 自定义颜色
    return colors[index];
  };

  // 计算数据占比
  const calculatePercentages = (data: number[]) => {
    const total = data.reduce((sum, value) => sum + value, 0);
    return data.map((value) => (value / total) * 100); // 返回占比
  };

  // 根据数据动态设置图表配置
  const updateChartOption = (data: number[]) => {
    const categories = ['刷题类', '收藏类', '点赞类', '评论'];
    calculatePercentages(data); // 计算占比

    // 使用 percentages 更新 chartOption
    chartOption.value = {
      legend: {
        left: 'center',
        data: categories,
        bottom: 0,
        icon: 'circle',
        itemWidth: 8,
        textStyle: {
          color: '#4E5969',
        },
        itemStyle: {
          borderWidth: 0,
        },
      },
      tooltip: {
        show: true,
        trigger: 'item',
      },
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: '40%',
            style: {
              text: '总数',
              textAlign: 'center',
              fill: '#4E5969',
              fontSize: 14,
            },
          },
          {
            type: 'text',
            left: 'center',
            top: '50%',
            style: {
              text: '928,531', // 可以替换为动态值
              textAlign: 'center',
              fill: '#1D2129',
              fontSize: 16,
              fontWeight: 500,
            },
          },
        ],
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '50%'],
          label: {
            formatter: '{d}%', // 显示占比
            fontSize: 14,
            color: '#4E5969',
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          data: categories.map((category, index) => ({
            value: data[index], // 使用实际数值
            name: category,
            itemStyle: {
              color: getCategoryColor(index), // 为每个类别指定不同的颜色
            },
            label: {
              formatter: `{d}%`, // 显示占比
            },
          })),
        },
      ],
    };
  };

  // 在组件挂载时获取数据并更新图表
  onMounted(async () => {
    const data = await fetchData(); // 模拟获取数据
    updateChartOption(data); // 更新图表选项
  });
</script>

<style scoped lang="less"></style>
